<template>
  <el-container style="height: 700px; border: 1px solid #eee">
    <el-header style="font-size: 30px;background-color: rgb(238, 241, 246)">历史记录</el-header>
    <el-main>
      <div id="table">
        <el-select v-model="typeselect" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="begindate" type="date" placeholder="选择起始日期">
        </el-date-picker>
        <el-date-picker v-model="enddate" type="date" placeholder="选择结束日期">
        </el-date-picker>

        <el-button type="primary" @click="quary">查询</el-button>
        <el-button type="primary" @click="flush">刷新</el-button>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="ysjid" label="饮水机编号" width="180">
          </el-table-column>
          <el-table-column prop="stuid" label="学生卡编号" width="180">
          </el-table-column>
          <el-table-column prop="sw" label="水温" width="180">
          </el-table-column>
          <el-table-column prop="sz" label="水质" width="180">
          </el-table-column>
          <el-table-column prop="warn" label="故障报警状态">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>

</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import axios from 'axios'
import { setInterval } from 'core-js';
export default {
  created() {
    // console.log("发请求");
    // axios({
    //     url: "http://localhost:8888/list",
    //     method: 'get',
    // }).then((result) => {
    //     this.tableData = result.data.data.rows;
    //     console.log(this.tableData)
    // })
    // axios.get('http://localhost:8888/list')
    //   .then(response => {
    //     // 处理请求成功的数据
    //     console.log(response.data);

    //     this.tableData = response.data.data;
    //   })
    //   .catch(error => {
    //     // 处理请求错误
    //     console.error(error);
    //   });


  },
  methods: {
    quary: function () {
      // axios.get("http://localhost:8888/list1/?begin=" + this.begindate + "&end=" + this.enddate)
      //   .then(response => {
      //     // 处理请求成功的数据
      //     console.log(response.data);
      //     this.tableData = response.data.data;
      //   })
      //   .catch(error => {
      //     // 处理请求错误
      //     console.error(error);
      //   });
        axios({
          method:'GET',
          url: "http://localhost:8888/list1",
          params:{
            begin: this.begindate,
            end: this.enddate
          }
        }).then( res=>{
          console.log(res.data.data)
          this.tableData=res.data.data
        })
      
        // if(this.options.value == "选项1"){
        //   axios.get("http://localhost:8888/list/?begin=" + this.begindate + "&end=" + this.enddate)
        // .then(response => {
        //   // 处理请求成功的数据
        //   for(var i = 0; i < response.data.data.length; i++){
        //     console.log(response.data.data[i].tstate);
        //     this.tableData[0] = response.data.data[i].tstate;
        //   };

        // })
        // .catch(error => {
        //   // 处理请求错误
        //   console.error(error);
        // });

        // }
    },
    flush: function () {
      axios.get('http://localhost:8888/list')
        .then(response => {
          // 处理请求成功的数据
          console.log(response.data);
          this.tableData = response.data.data;
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [],
      options: [{
        value: '选项1',
        label: '温度传感器'
      }, {
        value: '选项2',
        label: '湿度传感器'
      }, {
        value: '选项3',
        label: '光敏光感器'
      }
      ],
      typeselect: '',
      begindate: '',
      enddate: '',
    }
  }
}
</script>